<template>

  <dl>
    <template v-if="type!='radio'">
      <dd v-for="(items,i) in value" :key="i">
        <van-checkbox v-model="items.checked" shape="square">{{items.title}}</van-checkbox>
        <van-field class="input" v-if="items.checked && items.haveInput" v-model="items.value" :value="items.value" placeholder="请注明" />
        <Children v-if="items.children  && items.checked" v-model="items.children" />
      </dd>
    </template>

    <template v-else>
      <dd>

        <van-radio-group v-model="value.checkedVal">
          <template v-for="(items,i) in value">
            <van-radio :key="i" :name="items.id">{{items.title}}</van-radio>
            <van-field class="input" v-if="value.checkedVal==items.id &&  items.haveInput" v-model="value.value" :value="value.value" placeholder="请注明" />
            <Children :key="i" v-if="value.checkedVal==items.id   && items.children" v-model="items.children" />
          </template>
        </van-radio-group>

      </dd>
    </template>
  </dl>

</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Children from "./children.vue";
@Component({
  name: "Children",
  components: {
    Children,
  },
  props: {
    value: {
      type: Array,
    },
    type: {
      type: String,
    },
  },
})
export default class children extends Vue {}
</script>

<style lang="scss" scoped>
dd {
  dl{
    margin-bottom: 10px;
  }
  margin-top: 8px;
  margin-left: 15px;
  .input {
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 4px;
    margin: 10px 0;
  }
}
</style>